<template>
	<view class="technician-page">
		<view class="header">
			<uv-search placeholder="请输入搜索内容" v-model="keyword"></uv-search>
			<view class="tab">
				<uv-tabs lineWidth="30" lineColor="#60bcbb" :activeStyle="{color: '#60bcbb',fontWeight: 'bold'}"
					:list="list" @click="click"></uv-tabs>
			</view>
		</view>
		<view class="uv-list-box flex-grow-1">
			<scroll-view @refresherrefresh="onRefresh" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
				@scrolltolower="lower" @scroll="scroll" @refresherpulling="onPulling" :refresher-enabled="true"
				:refresher-triggered="triggered">
				<view class="TechnicianService-list">
					<courseItemItem v-for="item in 100" :key="item" />
				</view>
			</scroll-view>
		</view>
		<uv-overlay :show="show" @click="show = false" :z-index="2"></uv-overlay>
		<view class="two-class" v-if="show">
			<view class="class-item itemActive" @click="tWOChang">
				<text>助失眠</text>
			</view>
			<view class="class-item" @click="tWOChang">
				<text>捏脚</text>
			</view>
			<view class="class-item" @click="tWOChang">
				<text>捏脚</text>
			</view>
			<view class="class-item" @click="tWOChang">
				<text>其他</text>
			</view>
		</view>
		<FootTabbar :currentIndex="1"></FootTabbar>
	</view>
</template>

<script>
	import courseItemItem from '@/components/courseItem/courseItem.vue'
	export default {
		components:{
			courseItemItem
		},
		data() {
			return {
				scrollTop: 0,
				triggered: false,
				freshing: true,
				list: [{
					name: '全部',
				}, {
					name: '足疗服务',
				}, {
					name: '理疗服务 '
				}],
				show: false,
				isShowtwoclass: false,
				dataList:[],
			}
		},
		onShow() {
			uni.hideTabBar();	
		},
		onLoad(option) {
		   //option 上个页面传递的参数。
		   // this.userId = option.userId; //上个页面传递的参数。
		  this.getList();
		},
		methods: {
			async getList(){
				// 查询中医教程数据
				const {code,data} = await this.muajax.chDoctorTheoryList();
				this.dataList=data
			},
			lower: function(e) {
				// console.log('到底部拉')
				// console.log(e)
			},
			// 滚动监听
			scroll: function(e) {
				// console.log(e)
			},
			// 下拉被触发
			onPulling(e) {
				this.triggered = true
				this.scrollTop = 0
			},
			onRefresh() {
				setTimeout(() => {
					this.triggered = false;
				}, 3000)
			},
			goTop: function(e) {
				// 滚动到顶部
				// 解决view层不同步的问题
				// this.scrollTop = this.old.scrollTop
				// this.$nextTick(function() {
				// 	this.scrollTop = 0
				// });
				// uni.showToast({
				// 	icon: "none",
				// 	title: "纵向滚动 scrollTop 值已被修改为 0"
				// })
			},
			click(item) {
				this.show = true
				console.log('item', item);
			},
			// 二级选择
			tWOChang() {
				this.show = false
			}
		}
	}
</script>

<style scoped lang="less">
	page {
		background: #f1f1f1;
		height: 100%;
	}

	.header {
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		// height: 200px;
		border-bottom: 1px solid #f1f1f1;
		position: relative;
		z-index: 99;
		flex-grow: 0;
	}

	.technician-page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		.uv-list-box {
			overflow: hidden;
		}
	}

	.scroll-Y {
		height: 100%;
		overflow-y: scroll;
	}

	.two-class {
		position: absolute;
		top: 198rpx;
		background: #fff;
		display: flex;
		width: 100%;
		z-index: 999;
		padding: 20rpx;
		box-sizing: border-box;
		border-top: 1px solid #f1f1f1;

		.class-item {
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 42rpx;
			letter-spacing: 0rpx;
			color: #666666;
			margin-right: 20rpx;
			padding: 10rpx;
		}

		.itemActive {
			color: #60bcbb;
			border: 1px solid #60bcbb;

			border-radius: 10rpx;
		}

	}
</style>